<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="//cdn.bootcss.com/zui/1.5.0/css/zui.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" choosefine-url="data.json">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-2">
            <div>{{name}}</div>
        </div>
        <div class="col-md-2">
            <button class="btn btn-primary" type="button">{{name}}</button>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <div class="has-warning">
                <input class="form-control" type="text" placeholder="{{resume}}">
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <div class="alert alert-success with-icon">
                <i class="icon-ok-sign"></i>
                <div class="content">
                    {{desc}}<hr>
                    <img src="{{headerImg}}"></div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>



    <table class="table table-bordered">
        <tbody  choosefine-type="list" choosefine-field="rows">
            <tr class="{{['active','success','danger','warning'] | arrayList:index}}" >
                <td>{{value.productname}}</td>
                <td>{{value.productid}}</td>
                <td>{{value.attr1}}</td>
                <td>{{value.listprice}}</td>
                <td>{{value.unitcost}}</td>
            </tr>
        </tbody>
    </table>

    <select choosefine-type="list"  choosefine-field="area">
        <option>{{value.text}}</option>
    </select>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script src="template.js"></script>
<script src="showMe.js"></script>
</body>
</html>